<!--
    This page contains the form "Windows"
    with a Javascript function that can enable the year of renovation.
-->

<script type="text/javascript">
    function visibleWindow(){
        if(document.getElementById('changedWindow').checked){
            document.getElementById('yearChangedWindow').removeAttribute('readonly');
            document.getElementById('changedCheckedWindow').style.color="black";
        }
        else{
            document.getElementById('yearChangedWindow').setAttribute('readonly', 'readonly');
            document.getElementById('yearChangedWindow').value = "";
            document.getElementById('changedCheckedWindow').style.color="grey";
        }            
    }
</script>
<p id="subtitle"><?php echo TXT_TAB_WINDOWS; ?></p>
<div style="background-color: #f2f2f2; margin : 10px; padding : 20px; border-radius: 10px; Box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.4);">
    

    <table id="windowsTab">
        <tr>
            <th style="text-align: left;  vertical-align: top;"><?php echo TXT_TYPE_WINDOW; ?></th>
            <td>
                <table id="windowsFormTab">
                    <tr>
                        <td>
                            <?php echo TXT_TYPE; ?> 1 : <?php echo TXT_ONE_LEAF; ?>
                        </td>
                        <td>
                            <?php echo TXT_TYPE; ?> 2 : <?php echo TXT_TWO_LEAVES; ?>
                        </td>
                        <td>
                            <?php echo TXT_TYPE; ?> 3 : <?php echo TXT_THREE_LEAVES; ?>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img src="../images/forms/windowsTypes/window1.png" height="120px"/>
                        </td>
                        <td>
                            <img src="../images/forms/windowsTypes/window2.png" height="120px"/>
                        </td>
                        <td>
                            <img src="../images/forms/windowsTypes/window3.png" height="120px"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input checked type="radio" id="radioWindow1" name="windowType" value="1" />
                        </td>
                        <td>
                            <input type="radio" id="radioWindow2" name="windowType" value="2" />
                        </td>
                        <td>
                            <input type="radio" id="radioWindow3" name="windowType" value="3" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <?php echo TXT_TYPE; ?> 4 : <?php echo TXT_FOUR_LEAVES; ?>
                        </td>
                        <td>
                            <?php echo TXT_TYPE; ?> 5 : <?php echo TXT_TWO_LEAVES_FOUR_GLASSES; ?>
                        </td>
                        <td>
                            <?php echo TXT_TYPE; ?> 6 : <?php echo TXT_TWO_LEAVES_THREE_GLASSES; ?>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img src="../images/forms/windowsTypes/window4.png" height="120px"/>
                        </td>
                        <td>
                            <img src="../images/forms/windowsTypes/window2_4.png" height="120px"/>
                        </td>
                        <td>
                            <img src="../images/forms/windowsTypes/window2_3.png" height="120px"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="radio" id="radioWindow4" name="windowType" value="4" />
                        </td>
                        <td>
                            <input type="radio" id="radioWindow5" name="windowType" value="5" />
                        </td>
                        <td>
                            <input type="radio" id="radioWindow6" name="windowType" value="6" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <div>
        <span><b><?php echo TXT_CHANGED_WINDOWS; ?></b></span>
        <input type="checkbox" id="changedWindow" name="changedWindow" onclick="visibleWindow()" />
        <span id="changedCheckedWindow"><?php echo TXT_CHANGED_YEAR; ?></span>
        <input type="date" id="yearChangedWindow" name="yearChangedWindow" readonly />
    </div>
</div>